<template>
    <ul>
        <li :style="{opacity}">vue</li>
        <li>news001 <input type="text"/></li>
        <li>news002 <input type="text"/></li>
        <li>news003 <input type="text"/></li>
    </ul>
</template>

<script>
    export default {
        name: "News",
        data(){
            return {
                opacity:0,
                timer:''
            }
        },
        // beforeDestroy() {
        //     console.log("组件销毁之前")
        //     clearInterval(this.timer)
        // },
        // mounted() {
        //     this.timer=setInterval(()=>{
        //         console.log("&&&")
        //         this.opacity-=0.01;
        //         this.opacity<=0?this.opacity=1:''
        //     },16)
        // },
        //路由组件特有
        activated() {

            this.timer=setInterval(()=>{
                console.log("&&&")
                this.opacity-=0.01;
                this.opacity<=0?this.opacity=1:''
            },16)
        },
        deactivated() {
            clearInterval(this.timer)
            console.log("失活了")
        }
    }
</script>

<style scoped>

</style>